프리텐다드 폰트를 추가함 #108
Merged
프리텐다드 폰트를 추가함 #108
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- font-synthesis: none을 추가함: 특정 브라우저에서 프리텐다드 폰트가 제대로 렌더링되지 않는 이슈가 있음 - 프리텐다드 폰트를 로컬 폰트로 추가함: Next.js 폰트 관련 최적화 이점을 누리기 위함
kimjihyo
requested review from
AYEOOON,
dltnwjd308,
rwaeng and
swgivenchy
as code owners
swgivenchy
approved these changes
Jan 6, 2026
Collaborator
swgivenchy
left a comment
swgivenchy
left a comment
There was a problem hiding this comment.
font-synthesis에 대해 처음들어봤네요 배워갑니다!!
고생하셨습니다!
rwaeng
approved these changes
Jan 6, 2026
Collaborator
rwaeng
left a comment
rwaeng
left a comment
There was a problem hiding this comment.
이상하게 렌더링 되는 이슈가 있군요! 저도 font-sysnthesis에 대해 배워갑니다👍
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🔸 작업 내용
🔸 고민 했던 부분
CDN vs local font
CDN으로 폰트를 불러올지 local 폰트로 적용할지 고민했으나 다음과 같은 이유로 로컬 폰트를 선택했습니다:
특정 브라우저에서 Pretendard Variable가 이상하게 렌더링 되는 이슈
font-synthesis: none을 적용하면 해결됩니다. 따라서 우리 프로젝트에도 추가했습니다.font-synthesis옵션은 브라우저가 없는 스타일/굵기를 억지로 만들어서(faux/synthetic) 생기는 현상을 방지하는데, font-synthesis: none을 안 걸면, 상황에 따라 가짜 bold/italic이 섞이면서 더 굵어 보이거나(embolden), 획이 뭉개지거나, 자간/렌더링이 이상해 보이는 느낌이 나올 수 있습니다.